import React, { useEffect } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Form, Row, Col, Input, Space, Button } from "antd";
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import XlUpload from "@/components/Form/XlUpload";

const {Item} = Form;
const initValues = {
  slots: [{name: ""}]
}
const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};
const labelCol = {
  span: 7
}

const AdPositionUpdate = ({title, visible, onCancel, onSubmit, loading, currentRow}: modalPropsType) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    const res = await form.validateFields();
    console.log("res", res);
    onSubmit({
      name: res?.name,
      code: res?.code,
      imagePath: res?.image?.[0]?.responseUrl,
      imageName: res?.image?.[0]?.name,
      slots: res?.slots?.map((v: any) => v?.name)
    });
  }

  useEffect(() => {
    if (currentRow) {
      form.setFieldsValue({
        name: currentRow?.name,
        code: currentRow?.code,
        image: [{uid: currentRow?.imagePath, name: currentRow?.imageName, responseUrl: currentRow?.imagePath, url: currentRow?.imageUrl}],
        slots: currentRow?.slots?.split(',')?.map((v: any) => ({name: v}))
      });
    }
  }, [JSON.stringify(currentRow)])

  return (
    <Modal
      title={title}
      onOk={handleSubmit}
      onCancel={onCancel}
      open={visible}
      maskClosable={false}
      confirmLoading={loading}
      width="750px"
    >
      <Form form={form} className="modal-form-padding" initialValues={initValues} labelCol={labelCol}>
        <Row gutter={30}>
          <Col span={12}>
            <Item label="广告页" name="name" rules={[{required: true, message: '请输入广告页名称'}]}>
              <Input maxLength={20} disabled={!!currentRow} />
            </Item>
            <Item label="广告页编码" name="code" rules={[{required: true, message: '请输入广告页名称'}]}>
              <Input maxLength={20} disabled={!!currentRow} />
            </Item>
            <Item label="广告位" required>
              <Form.List name="slots">
                {(fields, {add, remove}) =>
                  fields.map((field, fieldIndex) => (
                    <Space style={{marginBottom: 20}}>
                      <Form.Item noStyle name={[field.name,'name']} rules={[{required: true, message: '请输入广告位名称'}]}>
                        <Input />
                      </Form.Item>
                      {fieldIndex === 0 && <Button type="primary" onClick={() => add({name: ""})}><PlusOutlined /></Button>}
                      {fieldIndex > 0 && <Button onClick={() => remove(field.name)} type="primary"><MinusOutlined /></Button>}
                    </Space>
                  ))
                }
              </Form.List>
            </Item>
          </Col>
          <Col span={12}>
            <Item label="示例图" rules={[{required: true, message: '请上传示例图'}]} name="image" getValueFromEvent={normFile}>
              <XlUpload accept=".jpeg,.png,.jpg" max={1} listType="picture-card" uploadParams={{businessCode: 'ad'}} />
            </Item>
          </Col>
        </Row> 
      </Form>
    </Modal>
  );
}
export default AdPositionUpdate;